import { Button, Col, Form, Input, PageHeader, Row, Space } from 'antd';
import { CheckOutlined, RollbackOutlined } from '@ant-design/icons';
import { useLocation, useNavigate } from 'react-router-dom';
import './css/coreEnterpriseDetail.scss';
import { useCallback, useEffect, useState } from 'react';
import { getCoreEnterpriseAccountType } from 'src/lib/dataDictionary';
import basicService from '../../../service/basic/basic.service';
import JSampleSelect from '../../../component/common/JSampleSelect/JSampleSelect';

const colSpan = 6;
const rowOption = {
  gutter: 60,
  // justify: 'center'
};
const coreEnterpriseAccountType = getCoreEnterpriseAccountType();

function CoreEnterpriseDetail(props) {
  const navigate = useNavigate();
  const location = useLocation();
  const [form] = Form.useForm();
  const [formDisabled, setFormDisabled] = useState(false);
  const [id, setId] = useState('');
  const [titleType, setTitleType] = useState('');

  const submitForm = useCallback(
    async (value) => {
      /**
       * 表单数值变化，提交表单
       * */
      let data;
      if (id) {
        data = await basicService.updateCoreEnterprise({
          id,
          ...value,
        });
      } else {
        data = await basicService.addCoreEnterprise(value);
      }
      if (data.success) {
        navigate('/internetCommercialBank/coreEnterprise');
      }
    },
    [id, navigate],
  );

  useEffect(() => {
    const state = location.state;
    if (!state) {
      return;
    }
    const { type, detail } = state;
    let titleTypeName = '新增';
    if (type === 'detail' || type === 'edit') {
      form.setFieldsValue({
        ...detail,
      });
      if (type === 'detail') {
        setFormDisabled(true);
        titleTypeName = '详情';
      } else {
        setId(detail.id);
        titleTypeName = '编辑';
      }
    }
    setTitleType(titleTypeName);
  }, [form, location]);

  return (
    <div className="common-detail-warp">
      <PageHeader title={`核心企业管理新增${titleType}`} />
      <Form
        form={form}
        name=""
        className="coreEnterpriseDetail-form-wrap common-detail-form-wrap"
        layout="vertical"
        onFinish={submitForm}
      >
        <Row {...rowOption}>
          <Col span={colSpan}>
            <Form.Item
              name="coreCustName"
              label="核心企业名称"
              rules={[
                {
                  required: true,
                  message: '请输入核心企业名称',
                },
                {
                  type: 'string',
                },
                {
                  max: 50,
                  message: '核心企业名称最大长度为50',
                },
              ]}
            >
              <Input placeholder="请输入核心企业名称" allowClear disabled={formDisabled} />
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item
              name="coreCustCode"
              label="核心企业统一社会信用代码"
              rules={[
                {
                  required: true,
                  message: '请输入统一社会信用代码',
                },
                {
                  type: 'string',
                },
                {
                  max: 50,
                  message: '统一社会信用代码最大长度为50',
                },
              ]}
            >
              <Input placeholder="请输入统一社会信用代码" allowClear disabled={formDisabled} />
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item
              name="dataprovide"
              label="机构英文代码简称"
              rules={[
                {
                  required: true,
                  message: '请输入机构英文代码简称',
                },
                {
                  pattern: /^[A-Za-z]*$/g,
                  message: '请输入正确的机构英文代码简称',
                },
                {
                  max: 50,
                  message: '机构英文代码简称最大长度为50',
                },
              ]}
            >
              <Input placeholder="请输入机构英文代码简称" allowClear disabled={formDisabled} />
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item
              name="accountType"
              label="账户类型"
              rules={[
                {
                  required: true,
                  message: '请选择账户类型',
                },
              ]}
            >
              <JSampleSelect
                options={coreEnterpriseAccountType}
                placeholder="请选择账户类型"
                allowClear
                disabled={formDisabled}
              />
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item
              name="bankName"
              label="收款银行名称"
              rules={[
                {
                  required: true,
                  message: '请输入收款银行名称',
                },
                {
                  type: 'string',
                },
                {
                  max: 50,
                  message: '收款银行名称最大长度为50',
                },
              ]}
            >
              <Input placeholder="请输入收款银行名称" allowClear disabled={formDisabled} />
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item
              name="receiptAccountName"
              label="收款银行账户名称"
              rules={[
                {
                  required: true,
                  message: '请输入收款银行账户名称',
                },
                {
                  type: 'string',
                },
                {
                  max: 50,
                  message: '收款银行账户名称最大长度为50',
                },
              ]}
            >
              <Input placeholder="请输入收款银行账户名称" allowClear disabled={formDisabled} />
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item
              name="receiptAccountNo"
              label="收款银行卡号"
              rules={[
                {
                  required: true,
                  message: '请输入收款银行卡号',
                },
                {
                  type: 'string',
                },
                {
                  max: 50,
                  message: '收款银行卡号最大长度为50',
                },
              ]}
            >
              <Input placeholder="请输入收款银行卡号" allowClear disabled={formDisabled} />
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item
              name="instCode"
              label="总行联行号"
              rules={[
                {
                  required: true,
                  message: '请输入总行联行号',
                },
                {
                  type: 'string',
                },
                {
                  max: 50,
                  message: '总行联行号最大长度为50',
                },
              ]}
            >
              <Input placeholder="请输入总行联行号" allowClear disabled={formDisabled} />
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item
              name="branchInstCode"
              label="开户行联行号"
              rules={[
                {
                  required: true,
                  message: '请输入开户行联行号',
                },
                {
                  type: 'string',
                },
                {
                  max: 50,
                  message: '开户行联行号最大长度为50',
                },
              ]}
            >
              <Input placeholder="请输入开户行联行号" allowClear disabled={formDisabled} />
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item
              name="branchName"
              label="支行名称"
              rules={[
                {
                  required: true,
                  message: '请输入支行名称',
                },
                {
                  type: 'string',
                },
                {
                  max: 50,
                  message: '支行名称最大长度为50',
                },
              ]}
            >
              <Input placeholder="请输入支行名称" allowClear disabled={formDisabled} />
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item
              name="appId"
              label="APPID"
              rules={[
                {
                  required: true,
                  message: '请输入APPID',
                },
                {
                  type: 'string',
                },
                {
                  max: 50,
                  message: 'APPID最大长度为50',
                },
              ]}
            >
              <Input placeholder="请输入APPID" allowClear disabled={formDisabled} />
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item
              name="pid"
              label="PID"
              rules={[
                {
                  required: true,
                  message: '请输入PID',
                },
                {
                  type: 'string',
                },
                {
                  max: 50,
                  message: 'PID最大长度为50',
                },
              ]}
            >
              <Input placeholder="请输入PID" allowClear disabled={formDisabled} />
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item
              name="dataOrgId"
              label="网商角色ID"
              rules={[
                {
                  required: true,
                  message: '请输入网商角色ID',
                },
                {
                  type: 'string',
                },
                {
                  max: 50,
                  message: '网商角色ID最大长度为50',
                },
              ]}
            >
              <Input placeholder="请输入网商角色ID" allowClear disabled={formDisabled} />
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item
              name="outUniCode"
              label="方案合约号"
              rules={[
                {
                  required: true,
                  message: '请输入方案合约号',
                },
                {
                  type: 'string',
                },
                {
                  max: 50,
                  message: '方案合约号最大长度为50',
                },
              ]}
            >
              <Input placeholder="请输入方案合约号" allowClear disabled={formDisabled} />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="center" className="pt60">
          <Space size={30}>
            {!formDisabled && (
              <Button type="primary" htmlType="submit" icon={<CheckOutlined />}>
                提交
              </Button>
            )}
            <Button
              icon={<RollbackOutlined />}
              onClick={() => {
                navigate(-1);
              }}
            >
              返回
            </Button>
          </Space>
        </Row>
      </Form>
    </div>
  );
}

export default CoreEnterpriseDetail;
